<template>
  <transition
    appear
    enter-active-class="animated slideInRight"
    leave-active-class="animated slideOutRight"
  >
    <div class="manage-sheet" @click.stop>
      <div class="manage-sheet-bar w700">
        <h5 @click="checkAll">{{isCheckAllCls}}</h5>
        <p>管理歌单</p>
        <router-link to="/user/" tag="h5">完成</router-link>
      </div>
      <div class="global-scroll-wrap" ref="scrollWrap">
        <scroll class="scroll" ref="scroll">
          <div>
            <div class="scroll-view w700">
              <van-checkbox-group v-model="checkedGroup" ref="checkboxGroup">
                <draggable
                  element="ul"
                  v-model="sheets"
                  @start="handleDragStart"
                  @end="handleDragEnd"
                  :options="{draggable:'.songsheet-row',animation:'300',handle:'.movebox',ghostClass:'ghostCls',chosenClass:'chosenCls'}"
                >
                  <transition-group name="list">
                    <div class="songsheet-row" v-for="item in sheets" :key="item.id">
                      <van-checkbox
                        v-model="item.checked"
                        :name="item.id"
                        checked-color="#222"
                        icon-size="18px"
                      ></van-checkbox>
                      <songsheet-item
                        :image="item.coverImgUrl"
                        :name="item.name"
                        :count="item.trackCount"
                        :privacy="item.privacy"
                        :id="item.id"
                        MGB="0"
                      ></songsheet-item>
                      <div class="movebox">
                        <i class="iconfont iconyidong nocur"></i>
                        <i class="iconfont iconyidong1 cur"></i>
                      </div>
                    </div>
                  </transition-group>
                </draggable>
              </van-checkbox-group>
            </div>
          </div>
        </scroll>
      </div>
      <div
        class="del-btn"
        :class="{'abled':this.checkedGroup.length>=1}"
        ref="delBtn"
        @click="handleDelClick"
      >
        <i class="iconfont iconlajitong"></i>
        <span>删除</span>
      </div>
      <!-- 管理歌单 -->
    </div>
  </transition>
</template>

<script>
import { Checkbox, CheckboxGroup } from "vant";
import Scroll from "@/base/scroll/scroll";
import SongsheetItem from "@/base/songsheet-item/songsheet-item";
import { playListMixin } from "@/common/mixin.js";
import draggable from "vuedraggable";
import { deleteSheet } from "@/request/api";
export default {
  mixins: [playListMixin],
  data() {
    return {
      sheets: "",
      // 被选中的id数组
      checkedGroup: [],
      isCheckAll: false
    };
  },
  components: {
    Scroll,
    SongsheetItem,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    draggable
  },
  computed: {
    isCheckAllCls() {
      return this.isCheckAll ? "取消全选" : "全选";
    }
  },
  created() {
    var sheets = this.$route.params.sheets;
    sheets.forEach(item => {
      item.checked = false;
    });
    this.sheets = sheets;
    console.log(this.sheets);
  },

  methods: {
    handlePlayList(playlist) {
      const bottom = playlist.length > 0 ? "108px" : "";
      const DelBtnbottom = playlist.length > 0 ? "60px" : "";
      this.$refs.scrollWrap.style.bottom = bottom;
      this.$refs.delBtn.style.bottom = DelBtnbottom;
      this.$refs.scroll.refresh();
    },
    // 选择全部
    checkAll() {
      if (!this.isCheckAll) {
        this.isCheckAll = true;
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.isCheckAll = false;
        this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    // 开始拖放：
    handleDragStart() {
      this.$refs.scroll.disable();
    },
    // 拖放结束：
    handleDragEnd() {
      this.$refs.scroll.enable();
      // 拖放结束获取idlist:
      let idArray = [];
      this.sheets.forEach(item => {
        if (item.id) {
          idArray.push(item.id);
        }
      });
    },
    // 点击删除歌单：
    async handleDelClick() {
      if (!this.checkedGroup.length) {
        return false;
      }
      let IdList = this.checkedGroup.toString();
      const res = await deleteSheet({ id: IdList });
      if (res.code === 200) {
        this.$toast("删除成功");
        // 从数组中删除指定的id:
        this.sheets = this.sheets.filter(item => {
          return !this.checkedGroup.includes(item.id);
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.slideInRight {
  animation-duration: 0.6s;
}
.slideOutRight {
  animation-duration: 0.8s;
}
.manage-sheet {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1002;
  background-color: #222;
}
.manage-sheet-bar {
  .flex-nowrap-sb(center);
  font-size: 16px;
  padding: 18px 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  p {
    font-weight: bold;
  }
}
.global-scroll-wrap {
  position: absolute;
  top: 60px;
  left: 0;
  bottom: 48px;
  width: 100%;
}
.scroll {
  height: 100%;
  overflow: hidden;

  position: absolute;
  right: 0;
  left: 0;
}
.scroll-view {
  height: 100%;
}
.del-btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 16px;
  border-top: 1px solid #222;
  background-color: #222;
  .tf3(ease);
  span,
  i {
    opacity: 0.5;
  }
  span {
    margin-left: 10px;
  }
  &.abled {
    background-color: #111;
    span,
    i {
      opacity: 1;
    }
  }
  // box-shadow: 0 -5px 5px rgba(255, 255, 255, 0.03);
}
.songsheet-row {
  .flex-row-nowrap(center);
  width: 100%;
  margin-bottom: 10px;
  .van-checkbox {
    margin-right: 15px;
  }
  .movebox {
    float: right;
    i {
      font-size: 22px;
      opacity: 0.8;
      &.nocur {
        display: block;
      }
      &.cur {
        display: none;
      }
    }
  }
  &.chosenCls {
    .movebox {
      i {
        font-size: 22px;
        opacity: 0.8;
        &.nocur {
          display: none;
        }
        &.cur {
          display: block;
        }
      }
    }
  }
  .sh-item {
    flex: 1;
  }
}
.list-move {
  transition: transform 1s;
}
.songsheet-row {
  // transition: all 1s;
}
// .list-enter,
// .list-leave-to {
//   opacity: 0;
//   transform: translateY(30px);
// }
.list-leave-active {
  position: absolute;
}
</style>